---
import type { BundledTheme, BundledLanguage } from 'shiki'
import {
  transformerCompactLineOptions,
  type TransformerCompactLineOption
} from '@shikijs/transformers'
import { getShiki } from '../../lib/highlighter'
import CopyCodeButton from './CopyCodeButton.svelte'

interface Props {
  lang: BundledLanguage
  theme?: BundledTheme
  class?: string
  title?: string
  code: string
  lineOptions?: TransformerCompactLineOption[]
}

const highlighter = await getShiki()

const formatted = highlighter.codeToHtml(Astro.props.code.replace(/\n$/, '') ?? '', {
  // @ts-ignore
  lang: Astro.props.lang === 'svg' ? 'html' : Astro.props.lang,
  theme: 'dracula-soft',
  transformers: [transformerCompactLineOptions(Astro.props.lineOptions ?? [])]
})
---

{
  Astro.props.title ? (
    <div class="code not-content">
      <div class="text-faded z-10 inline-block translate-y-px rounded-t-md border border-x-white/20 border-b-white/5 border-t-white/20 bg-blue-900 px-2 py-1 text-sm">
        {Astro.props.title}
      </div>
      <div
        class:list={[
          'relative overflow-x-auto rounded-b-md rounded-tr-md border border-white/20 bg-blue-900 text-sm shadow-xl [&>*]:!bg-transparent [&>*]:p-2',
          Astro.props.class ?? ''
        ]}
      >
        <CopyCodeButton
          client:idle
          code={Astro.props.code}
        />
        <Fragment set:html={formatted} />
      </div>
    </div>
  ) : (
    <div
      class:list={[
        'code not-content group relative overflow-x-auto rounded-md border border-white/20 bg-blue-900 text-sm shadow-xl [&>*]:!bg-transparent [&>*]:p-2',
        Astro.props.class ?? ''
      ]}
    >
      <CopyCodeButton
        client:idle
        code={Astro.props.code}
      />
      <Fragment set:html={formatted} />
    </div>
  )
}
